<template>
  <div>
    <el-row ><el-col align="center"><el-button thpe="primary" @click="insertExam">添加题目</el-button></el-col></el-row>
    <el-table :data="examList" border  align="center">
      <el-table-column prop="id" label="id"></el-table-column>
      <el-table-column prop="title" label="题目"></el-table-column>
      <el-table-column prop="answer" label="答案"></el-table-column>
      <el-table-column prop="score" label="分数"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="danger" @click="deleteExam(scope.row.id)">删除</el-button>
          <el-button type="primary" @click="updateExam(scope.row)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    </div>
</template>

<script>
    export default {
     name: "ShowExam",
      data(){
       return {
         examList:[]
       }
      },
      methods:{
       insertExam(){
          this.$router.push("/insertExam")
       },
        deleteExam(id){
          this.axios({
            url:"/exams/"+id,
            method:"DELETE"
          }).then((res)=>{
            this.$message("删除成功")
            this.showExam()
          })
        },
        updateExam(exam){
          this.$router.push({path:'/updateExam',query:{exam:exam}})
        },
       showExam(){
         this.axios({
           url:"/exams",
           method:"GET"
         }).then((res)=>{
           this.examList=res.data
         })
       }
      },
      created() {
        this.showExam()
      }
    }
</script>

<style scoped>

</style>
